<template>
  <div class="container">
    <head-view></head-view>
    <div class="main" v-if="state">
      <h1 class="title">查看合适院校 <i class="el-icon-arrow-right"></i></h1>
      <el-input
        type="search"
        placeholder="请输入你的分数"
        class="input-with-select"
        v-model="keyword"
      >
      </el-input>

      <el-table :data="pageData" stripe style="width: 100%">
        <el-table-column prop="number" label="院校编号"></el-table-column>
        <el-table-column prop="schoolname" label="院校名称"></el-table-column>
        <el-table-column prop="fraction" label="分数线"></el-table-column>
        <el-table-column prop="batch" label="院校类型"></el-table-column>
        <el-table-column prop="url" v-slot="scope">
          <a :href="scope.row.url">详情</a>
        </el-table-column>
      </el-table>

      <p>
        <button :disabled="page == 1" v-on:click="page--">
          <i class="el-icon-arrow-left"></i>
        </button>
        <button
          v-for="p in totalpage"
          v-on:click="page = p"
          :style="{ color: page == p ? '#409EFF' : '' }"
          :key="p"
        >
          {{ p }}
        </button>
        <button :disabled="page == totalpage" v-on:click="page++">
          <i class="el-icon-arrow-right"></i>
        </button>
      </p>
    </div>

    <div class="logonpage" v-if="!state">
      <i class="el-icon-loading"></i> <span>请登录后访问</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      state: true,
      keyword: '',
      page: 1, // 默认第一页
      perpage: 5 // 每页分多少条
    }
  },

  created () {
    this.$http.get('school/list').then((res) => {
      if (res.err > 0) {
        console.error(res.desc)
      } else {
        this.tableData = res.result
      }
    })

    if (!localStorage.getItem('Zk-Token')) {
      this.state = false
    }
  },

  computed: {
    searchData () {
      return this.tableData.filter((item) => {
        return item.fraction < this.keyword
      })
    },

    totalpage () {
      return Math.ceil(this.searchData.length / this.perpage) // 总页数
    },

    pageData () {
      const start = (this.page - 1) * this.perpage
      const end = start + this.perpage
      return this.searchData.slice(start, end)
    }
  }
}
</script>

<style scoped>
.main {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.main .title {
  margin-top: 50px;
  margin-bottom: 0;
}
.main p {
  margin-top: 20px;
  float: right;
}
.main p button {
  font-size: 16px;
  padding: 10px;
  border: none;
}
.main .el-input {
  width: 300px;
  margin: 30px 0;
}
.logonpage {
  text-align: center;
  margin-top: 300px;
  font-size: 20px;
}
</style>
